<template>
    <div class="singerList">
        <div class="singer-title">
            <h3>歌手列表</h3>
        </div>
        <div class="singerBox">
            <div
                class="singerItem"
                v-for="item in singerList.data"
                @click="singerListJumpDetails(item.id)"
            >
                <div class="img-box">
                    <img :src="item.img1v1Url" alt="" ref="singerImg" />
                </div>
                <div class="content-box">
                    <p>{{ item.name }}</p>
                    <span>专辑数{{ item.albumSize }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { formatTime, debounce, lazyload } from "../../utils/common";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "searchDetails"
);
export default {
    created() {
        this.search(this.$route.params._keywords);
    },
    computed: {
        ...mapState(["singerList", "searchType"]),
    },
    methods: {
        ...mapActions(["search"]),
        ...mapMutations([""]),
        singerListJumpDetails(val) {
            this.$router.push("/home/singerDetails/art-musicList/" + val);
        },
    },
};
</script>

<style lang='scss' scoped>
img {
    width: 100%;
    height: 100%;
}
.singerList {
    .singer-title {
        border-left: 2px solid red;
        padding-left: 5px;
    }
    .singerBox {
        padding: 20px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .singerItem {
            width: 150px;
            height: 180px;
            text-align: center;
            cursor: pointer;
            margin: 20px;
            .img-box {
                width: 150px;
                height: 150px;
            }
            .content-box {
                p {
                    font-size: 15px;

                    color: #3a3a3a;
                    margin: 10px 0;
                }
                span {
                    font-size: 14px;
                    color: red;
                }
            }
        }
    }
}
</style>